<template>
  <v-container
    fluid
    tag="section"
  >
    <v-card>
      <v-tabs
        v-model="tab"
        background-color="primary"
        dark
      >
        <v-tab
          v-for="item in items"
          :key="item.tab"
        >
          {{ item.tab }}
        </v-tab>
      </v-tabs>

      <v-tabs-items v-model="tab">
        <v-tab-item
          v-for="item in items"
          :key="item.tab"
        >
          <rule-config v-if="item.id==='ruleconfig'" />
        </v-tab-item>
      </v-tabs-items>
    </v-card>
    <v-overlay
      z-index="0"
      :value="overlay"
    >
      <v-row justify="space-around">
        <v-img
          :aspect-ratio="4/3"
          :width="400"
          :src="require('@/assets/star.svg')"
        />
      </v-row>
      <v-row justify="space-around">
        <v-simple-table
          :light="!$vuetify.theme.dark"
        >
          <template v-slot:default>
            <tbody>
              <tr>
                <td>
                  {{ lanChar.sysConfig.UIVerifyUserName }}
                </td>
                <td>
                  <v-toolbar>
                    <v-autocomplete
                      v-model="userName"
                      :loading="userNameLoading"
                      :items="userNameItems"
                      :search-input.sync="userNameSearch"
                      cache-items
                      class="mx-4"
                      flat
                      hide-details
                      clearable
                      label="Who are you?"
                      solo-inverted
                    />
                  </v-toolbar>
                </td>
              </tr>
              <tr>
                <td>
                  {{ lanChar.sysConfig.UIVerifyPassword }}
                </td>
                <td>
                  <v-toolbar>
                    <v-autocomplete
                      v-model="password"
                      :items="passwordItems"
                      :search-input.sync="passwordSearch"
                      type="password"
                      class="mx-4"
                      flat
                      hide-details
                      clearable
                      solo-inverted
                    />
                  </v-toolbar>
                </td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
      </v-row>
      <v-divider class="my-4 secondary" />
      <v-row justify="space-around">
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="primary"
              dark
              min-width="400"
              v-bind="attrs"
              v-on="on"
              @click="loginVerification()"
            >
              <v-icon>
                mdi-cloud-check-outline
              </v-icon>
              <span>{{ lanChar.sysConfig.UIVerifyButtonDescp }}</span>
            </v-btn>
          </template>
          <span>{{ lanChar.sysConfig.UIVerifyButtonHint }}</span>
        </v-tooltip>
      </v-row>
    </v-overlay>
    <material-snackbar-tip
      v-model="snackbarDescp.snackbar"
      :type="snackbarDescp.snackbarType"
      :timeout="snackbarDescp.snackbarTimeout"
      v-bind="{
        bottom: true,
        right: true
      }"
      :text="snackbarDescp.snackbarContent"
    />
  </v-container>
</template>

<script>
  import Vue from 'vue'
  import RuleConfig from './config/RuleConfig.vue'
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  import * as mcAxios from '@/util/mcaxios'

  export default {
    name: 'Config',
    components: {
      RuleConfig,
    },
    data () {
      return {
        lanChar: lan.GetLan(),
        // snackbar data
        snackbarDescp: {
          snackbar: false,
          snackbarContent: 'snackbar content',
          snackbarTimeout: 2000,
          snackbarType: 'info',
        },
        dark: 'light',
        overlay: false,
        userName: null,
        userNameLoading: false,
        userNameSearch: null,
        userNameItems: [],
        password: null,
        passwordItems: [],
        passwordSearch: null,
        keyDictionary: [
          '123456',
          'root',
          'ubuntu',
          'upf',
          'dp',
        ],

        tab: null,
        items: [
          { tab: lan.LanChar.sysConfig.UITabNameRules, id: 'ruleconfig', component: RuleConfig },
        ],
      }
    },
    watch: {
      userNameSearch (val) {
        val && val !== this.userName && this.userNameQuerySelections(val)
      },
      passwordSearch (val) {
        val && val !== this.password && this.passwordQuerySelections(val)
      },
    },
    created () {
      this.overlay = globalDef.CONFIG_UI_OVERLAY
      this.items[0].tab = this.lanChar.sysConfig.UITabNameRules
    },
    mounted () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
        this.items[0].tab = this.lanChar.sysConfig.UITabNameRules
      })
    },
    beforeDestroy () {
      globalDef.CONFIG_UI_OVERLAY = this.overlay
    },
    methods: {
      addContentPage (item) {
        var MyComponent = Vue.extend(item.component)
        new MyComponent().$mount(item.id)
      },
      tipInfo (level, content, timeout) {
        this.snackbarDescp.snackbarType = level
        this.snackbarDescp.snackbarContent = content
        this.snackbarDescp.snackbarTimeout = timeout
        this.snackbarDescp.snackbar = true
      },
      userNameQuerySelections (v) {
        this.userNameItems = this.keyDictionary.filter(e => {
          return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
        })
        if (this.userNameItems.length === 0) {
          this.userNameItems = [v]
        }
      },
      passwordQuerySelections (v) {
        this.passwordItems = this.keyDictionary.filter(e => {
          return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
        })
        if (this.passwordItems.length === 0) {
          this.passwordItems = [v]
        }
      },
      loginVerification () {
        const data = {
          request_type: 'ui login verification',
          instance_id: 'instance_id',
          sequence_no: 1000,
          data: {
            user_name: this.userName,
            password: this.password,
          },
        }
        mcAxios.axiosSetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.overlay = false
            } else {
              this.tipInfo('info', this.lanChar.tipInfoOperateRespFail + res.data.msg, globalDef.TIPINFO_DISPLAY_DURATION)
            }
          })
          .catch((e) => {
            this.tipInfo('error', this.lanChar.tipInfoOperateRequestFail + e, globalDef.TIPINFO_DISPLAY_DURATION)
          })
      },
    },

  }
</script>
